<template>
  <div class="container">
    <div class="side">
      <div
        :class="['side-item', { active: current === 'userinfo' }]"
        @click="change('userinfo')"
      >
        用户信息
      </div>
      <div
        :class="['side-item', { active: current === 'mall' }]"
        @click="change('mall')"
      >
        商城
      </div>

      <div @click="logout">
        退出
      </div>
    </div>
    <div class="content">
      <router-view />
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex';

export default {
  data() {
    return {
      current: this.$route.path.split('/')[2],
    };
  },
  methods: {
    ...mapActions(['logout']),
    change(v) {
      this.current = v;
      const path = `/admin/${v}`;
      if (this.$route.path !== path) {
        this.$router.push(path);
      }
    },
  },
};
</script>

<style scoped>
.container {
  height: 100vh;
  display: flex;
}

.side {
  height: 100%;
  width: 200px;
  background-color: gray;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.content {
  flex: 1;
  background-color: pink;
  color: white;
}

.side-item {
  width: 100%;
  display: flex;
  justify-content: center;
  color: hotpink;
}

.active {
  background-color: white;
}
</style>
